<template>
	<view class="page index">
		<view class="header">
			<common-search v-model="keyWord" @input="input" @filter="openPopup"></common-search>
		</view>
		<view class="main">
			<empty v-if="empty" :desc="desc"></empty>
			<scroll-view v-else class="scroll" scroll-y="true" @scrolltolower="scrollLower" :enhanced="true" :show-scrollbar="false">
				<view class="container">
					<view class="list" v-for="item in list" :key="item.id">
						<view class="item" @click="toDetails(item.processInstanceId)">
							<view class="top">
								<view class="left">
									<view class="avatar">
										<image src="@/static/images/avatar.png" mode="aspectFill"></image>
									</view>
									<view class="right">
										<view class="exp">
											{{item.processInstance.startUser.nickname}}的{{item.processInstance.name}}
										</view>
										<view class="time">
											{{$share.getTime(item.createTime)}}
										</view>
									</view>
								</view>
								<view class="status" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
									{{item.statusText}}
								</view>
							</view>
							<!-- <view class="content">
								申请内容申请内容申请内容申请内容申请内容申请内容申请内容申请内容申请内容申请内容
							</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
			<uni-popup ref="followPopup" type="top" background-color="#fff">
				<view class="filter">
					<view class="filter-container member">
						<view class="title">
							审批类型
						</view>
						<view class="filter-list">
							<view :class="['item', typeIndex == index && 'select']" v-for="(item, index) in $share.getApprovalType()" :key="index" @click="selectType(index, item.key)">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="filter-container time">
						<view class="title">
							申请时间
						</view>
						<!-- <view class="filter-list">
							<view :class="['item', timeIndex == index && 'select']" v-for="(item, index) in timeList" :key="index" @click="changeTime(index)">
								{{item}}
							</view>
						</view> -->
						<view class="select-time">
							<uni-datetime-picker v-model="timeRange" type="daterange" :end="Date.now()" rangeSeparator="至" @change="changeData" />
						</view>
					</view>
					<view class="footer">
						<button class="cencle" @click="cencle">清空</button>
						<button class="confire" @click="confire">确定</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import commonSearch from "@/components/commonSearch.vue";
	import {getDoneTaskListApi} from "@/api/approval_api.js";
	import empty from "@/components/empty.vue";
	export default {
		components: {
			commonSearch,
			empty
		},
		data() {
			return {
				empty: false,
				desc: '',
				keyWord: '',
				typeIndex: -1,
				key: '',
				// timeIndex: -1,
				// timeList: ['今日', '昨日', '本周', '上周', '本月', '上月'],
				timeRange:[],
				pageNum: 1,
				pageSize: 10,
				totalPage: 1,
				list: []
			}
		},
		onShow() {
			uni.showLoading({
				mask: true,
				title: ' 加载中...'
			})
			this.pageNum = 1;
			this.list = [];
			this.getDoneTaskList();
		},
		methods: {
			//滚动线触底
			scrollLower(){
				if(this.pageNum >= this.totalPage){
					return;
				}
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				this.pageNum++;
				this.getDoneTaskList();
			},
			//关键字
			input() {
				uni.showLoading({
					mask: true,
					title: ' 加载中...'
				})
				this.pageNum = 1;
				this.list = [];
				this.getDoneTaskList();
			},
			confire(){
				this.$refs.followPopup.close();
				uni.showLoading({
					mask: true,
					title: ' 加载中...'
				})
				this.pageNum = 1;
				this.list = [];
				this.getDoneTaskList();
			},
			// 清空筛选
			cencle(){
				this.typeIndex = -1;
				this.key = '';
				this.timeRange = [];
			},
			// 选择审批类型
			selectType(index, key){
				this.typeIndex = index;
				this.key = key
			},
			// changeTime(index){
			// 	if(this.timeRange.length > 0){
			// 		this.timeRange = [];
			// 	}
			// 	this.timeIndex = index
			// },
			// changeData(){
			// 	this.timeIndex = -1;
			// },
			openPopup(){
				this.$refs.followPopup.open();
			},
			// 获取审批列表
			async getDoneTaskList(){
				this.empty = false;
				if(this.keyWord == ''){
					this.desc = '暂无审批任务';
				}else{
					this.desc = '未搜索到审批任务';
				}
				let res = await getDoneTaskListApi({
					name: this.keyWord,
					key: this.key,
					createTime: this.timeRange.length == 0 ? '' : `${this.timeRange[0]} 00:00:00, ${this.timeRange[1]} 23:00:00`,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				}).catch(() => {
					this.empty = true;
					uni.hideLoading();
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let statusText = '';
					let color = '';
					switch(item.status){
						case 1: {
							statusText = '审批中';
							color = '#F4CE98';
							break;
						}
						case 2: {
							statusText = '已通过';
							color = '#A2EF4D';
							break;
						}
						case 3: {
							statusText = '不通过';
							color = '#f56c6c';
							break;
						}
						case 4: {
							statusText = '已取消';
							color = '#C9C9C9';
							break;
						}
						case 5: {
							statusText = '已退回';
							color = '#BD3124';
							break;
						}
						case 6: {
							statusText = '委派中';
							color = '#198AFA';
							break;
						}
					}
					return{
						...item,
						statusText,
						color
					}
				})
				this.list = [...this.list, ...res.data.list];
				this.totalPage = Math.ceil(res.data.total / this.pageSize);
				if(res.data.total == 0){
					this.empty = true;
				}
				await uni.hideLoading();
			},
			toDetails(id) {
				uni.navigateTo({
					url: `/pages/index/approval/details?id=${id}&showPass=${false}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.index {
		@include flex-c;
		>.header {
			padding: 18rpx 30rpx 0;
			flex: 0 0 auto;
		}
		.main {
			flex: 1 0 0;
			overflow: hidden;

			.scroll{
				height: 100%;
				.container{
					padding: 24rpx 28rpx;
					.list{
						padding: 0 0 18rpx;
						.item{
							@include box;
							padding: 28rpx;
							.top{
								@include flex-r-between-center;
								.left{
									@include flex-r-start-center;
									.avatar{
										@include avatar(62);
									}
									.right{
										padding-left: 18rpx;
										.exp{
											color: #000;
											font-size: 26rpx;
										}
										.time{
											font-size: 26rpx;
											color: #a0a2a0;
										}
									}
								}
								.status{
									// width: 80rpx;
									height: 40rpx;
									@include flex-r-center-center;
									padding: 0 10rpx;
									border: 2rpx #F4CE98 solid;
									font-size: 24rpx;
									border-radius: 4rpx;
								}
							}
							.content{
								padding: 24rpx 0 0;
								color: #000;
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
					}
				}
			}

			.filter {
				@include popup;
				.amount{
					.amoun-money{
						@include flex-r-between-center;
						border: 4rpx #E0E3EA solid;
						border-radius: 6rpx;
						height: 88rpx;
						padding: 0 20rpx;
						.tag{
							color: #C1C2C5;
							font-size: 38rpx;
						}
						.text{
							color: #101010;
							font-size: 32rpx;
						}
						input{
							text-align: center;
							font-size: 32rpx;
							color: #C4C7CF;
							padding: 0 10rpx;
						}
						.placeholder{
							text-align: center;
							color: #C4C7CF;
							font-size: 32rpx;
						}
					}
				}
				.time{
					.select-time{
						padding: 20rpx 0 0;
					}
				}
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	::v-deep .uni-calendar--fixed {
		top: 0;
		bottom: unset;
	}
</style>